<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>提现</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body style="height:100%;background-color:white;position:relative;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">提现</span>
    <span v-open-win.tapmode vurl="withdraw_list" style="position:absolute;right:10px;font-size:14px;">提现明细</span>
</div>
<div id="app" class="container" style="height:100%;" v-cloak>
    <div class="withdraw-line" style="margin-top:60px;"></div>
    <div class="withdraw-top">
        <div style="height:40px;line-height:40px;font-size:14px;">提现收益</div>
        <div class="withdraw-top-middle">
            <span>¥</span>
            <div>
                <input v-model.number="price" type="number">
            </div>
        </div>
        <div class="withdraw-top-bottom">
            <span>可提现收益: {{commission | double}}元</span>
            <span v-myclick="inputPrice">全部提现</span>
        </div>
    </div>
    <div class="withdraw-line"></div>
    <div class="withdraw-row-container">
        <div class="withdraw-row">
            请选择提现方式
        </div>
        <div class="withdraw-row" v-myclick="['ali', selectWithdrawType]">
            <img v-src="'../../image/accounts_icon_alipay.png'">
            <span>支付宝</span>
            <img class="withdraw-select" key="isAli" v-show="!withdrawTypes.ali"
                 v-src="'../../image/withdraw_icon_moren.png'">
            <img class="withdraw-select" key="notAli" v-show="withdrawTypes.ali"
                 v-src="'../../image/icon_select.png'">
        </div>
        <div class="withdraw-row" v-myclick="['bank', selectWithdrawType]">
            <img v-src="'../../image/accounts_icon_bank.png'">
            <span>银行卡</span>
            <img class="withdraw-select" key="isBank" v-show="!withdrawTypes.bank"
                 v-src="'../../image/withdraw_icon_moren.png'">
            <img class="withdraw-select" key="notBank" v-show="withdrawTypes.bank"
                 v-src="'../../image/icon_select.png'">
        </div>
    </div>
    <div class="withdraw-btn" :style="btnBg" v-myclick="withdraw">确认提现</div>
    <div v-myclick="closeFrame" class="modal" :class="{show:isFrameOpened}"></div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>

<script>
    var commission;
    var vm;
    var user;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        showProgress();
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            commission = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.getWithdrawTotal, data, callback);

        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                price: '',
                commission:commission,
                withdrawTypes: {
                    ali: true,
                    bank: false
                },
                isFrameOpened:false,
            },
            computed: {
                canWithdraw: function () {
                    var price_ = Number(this.price);
                    return price_ && price_ <= this.commission && price_ > 0;
                },
                btnBg: function () {
                    return {
                        backgroundColor: this.canWithdraw ? '#9d0152' : '#cccccc'
                    }
                },
                showModal:function () {
                    return this.isFrameOpened ? 'hide' : 'show';
                },
                type:function () {
                    if(this.withdrawTypes.ali){
                        return 1;
                    }else if(this.withdrawTypes.bank){
                        return 2;
                    }
                }
            },
            methods: {
                selectWithdrawType: function (type) {
                    for (var i in this.withdrawTypes) {
                        this.withdrawTypes[i] = i == type;
                    }
                },
                inputPrice: function () {
                    this.price = this.commission;
                },
                withdraw: function () {
                    if(!this.canWithdraw){
                        return;
                    }
                    user = JSON.parse(getPrefs('user'));
                    if(user.withdraw_password_settled == 0){
                        var fn = function () {
                            openWin('modifyPwd')
                        };
                        pinet.alert('尚未设置提现密码,是否设置?', fn);
                    }else{
                        this.isFrameOpened = true;
                        api.openFrame({
                            name: 'withdraw_frame',
                            url: 'withdraw_frame.html',
                            rect: {
                                x: 0,
                                y: 200,
                                w: 'auto',
                                h: 'auto',
                            },
                            pageParam: {
                                price: vm.price,
                                type:vm.type
                            },
                            bounces: true
                        });
                    }
                },
                closeFrame:function () {
                    this.isFrameOpened = false;
                    api.closeFrame({
                        name: 'withdraw_frame'
                    });
                }
            }
        })
    }

    function addListeners() {
        api.addEventListener({
            name: 'closeWithdraw_frame'
        }, function () {
            vm.closeFrame();
        });

        api.addEventListener({
            name: 'withdraw'
        }, function () {
            vm.closeFrame();
            vm.commission -= vm.price;
            vm.price = '';
            api.sendEvent({
                name: 'updUser',
                extra:{
                    balance:vm.commission
                }
            });
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
